<template>
    <TopNavBar   title="收益詳情" type="back"  />
  <div class="order-detail-bg">
    <div class="order-detail-card">
      <div class="order-detail-header">
        <img class="order-bot-icon" src="/static/img/Qdi_a1526882_15R.d87b23e6.svg" />
        <div class="order-bot-info">
          <div class="order-bot-title">{{ $route.query.title }}</div>
          <div class="order-bot-id">機器人 ID: robot_19</div>
        </div>
        <!-- <span  class="order-status-active">進行中</span> -->
        <span v-if="$route.query.status == 2" class="order-status-active">已贖回</span>
        <span v-if="$route.query.status == 1" class="order-status-active">已結束</span>
        <span v-if="$route.query.status == 0" class="order-status-active">進行中</span>
      </div>
      <div class="order-detail-profit-row">
        <span class="order-detail-profit-label">總收益</span>
        <span class="order-detail-profit-value">{{ $route.query.earn }} USD</span>
      </div>
    </div>
  </div>
</template>

<script setup>
// 静态mock数据
import { useRoute } from 'vue-router'
const $route = useRoute()
</script>

<style scoped>
.order-detail-bg {
  background: #f6f7f8;
  min-height: 100vh;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.order-detail-card {
  background: #fff;
  border-radius: 18px;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 18px 18px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.order-detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.order-bot-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  margin-right: 12px;
}
.order-bot-info {
  flex: 1;
}
.order-bot-title {
  font-size: 16px;
  font-weight: bold;
  color: #111;
}
.order-bot-id {
  font-size: 13px;
  color: #bcbcbc;
  margin-top: 2px;
}
.order-status-active {
  background: #eafff6;
  color: #00b386;
  font-size: 13px;
  border-radius: 12px;
  padding: 4px 12px;
  font-weight: 600;
}
.order-detail-profit-row {
  display: flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 4px;
  justify-content: space-between;
}
.order-detail-profit-label {
  color: #00b386;
  font-size: 18px;
  font-weight: bold;
  margin-right: 12px;
}
.order-detail-profit-value {
  color: #00b386;
  font-size: 20px;
  font-weight: bold;
}
</style> 